<template>
	<view class="package" :style="css.page+'min-height:'+$xyfun.xysys().windowHeight+'px'">
		<block v-if="!isLoading">
			<view class="package-list p-tb-30" v-if="!isEmpty">
				<view class="item br-10 m-lr-30 m-b-30 p-30 p-t bc-w" v-for="item in packageList" :key="item.id">
					<view class="item-list">
						<view class="tb lh-40 goods-title">
							{{item.store.name}}
						</view>
						<view class="date m-t-20 ts-26" :style="css.tcl">
							场地：{{item.venue.name}}
						</view>
						<view class="date m-t-20 ts-26" :style="css.tcl">
							日期：{{item.startdate}} - {{item.enddate}}
						</view>
						<view class="date m-t-20 ts-26" :style="css.tcl">
							区域：{{item.arealist}}
						</view>
						<view class="date m-t-20 ts-26" :style="css.tcl">
							时段：{{item.timelist}}
						</view>
					</view>
					
				</view>
			</view>
			<view v-else>
				<xy-empty :text="'暂无包场'" />
			</view>
		</block>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import xyEmpty from '@/components/xy-empty';
	export default {
		components: {
			xyEmpty,
		},
		data() {
			return {
				css:{},
				isLoading:true,
				isEmpty: true,
				packageList: [],
				currentPage: 1,
				lastPage: 1,
				loadStatus: 'loadmore',
			}
		},
		computed: {
			...mapState(['common'])
		},
		onLoad(options) {
			this.$xyfun.setNavBg();
			this.css = this.$xyfun.css();
			this.loadData();
		},
		onPullDownRefresh() {
			this.currentPage = 1;
			this.packageList = [];
			this.loadData();
		},
		onReachBottom() {
			if(this.currentPage < this.lastPage) {
				this.currentPage += 1;
				this.loadData();
			}
		},
		methods: {
			loadData(){
				this.$api.post({
					url: '/package/lists',
					loadingTip:'加载中...',
					data: {
						page: this.currentPage,
					},
					success: res => {
						uni.stopPullDownRefresh();
						this.isLoading = false;
						this.packageList = [...this.packageList, ...res.data];
						this.isEmpty = !this.packageList.length;
						this.currentPage = res.current_page; 
						this.lastPage = res.last_page;
						this.loadStatus = this.currentPage < res.last_page ? 'loadmore' : 'nomore';
					}
				});
			},
			
			setTab(index){
				this.packageStatusIndex = index;
				this.currentPage = 1;
				this.packageList = [];
				this.loadData();
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.tab{
		width: 100%;
		.line{height: 4rpx;width: 60rpx;margin: 10rpx auto 0;}
	}
	
	.return{line-height: 40rpx;height: 40rpx;}
	
	.package-list{
		.goods{
			line-height: 150rpx;
			.image{width: 150rpx;height: 150rpx;}
			.image image{width: 150rpx;}
		}
	}
	
	.item-list{
		.l{
			width: 150rpx;height: 150rpx;
			image{width: 150rpx;height: 150rpx;}
		}
		.r{
			width: 460rpx;
			.price-box{position: absolute; right: 0;top: 0;}
		}
	}
	
</style>